class Gellary {
  // 防抖定时器的编号
  id = 0
  // 最后一次动画效果执行的时间点，毫秒数
  lastRunTime = new Date(0)
  // 激活的下标
  activeIndex = 0
  // 轮播定时器编号
  id_1 = 0
  // 默认的配置项
  defaultOption = {
    // 默认宽度
    defaultWidth: 130,
    // 默认高度
    defaultHeight: 40,
    // 激活高度
    activeHeight: 400,
    // 元素激活宽度
    activeWidth: 340,
    // 动画的持续时间
    animateDuration: 300,
  }
  // box元素
  box = null
  // box元素的子元素列表
  children = null
  // 保存元素box子元素下标的数组
  list = []

  // 构造函数 new Gellary('.box',{widht:5,height:4})
  constructor(selector, option) {
    this.init(selector, option)
  }

  // 初始化方法
  init(selector, option) {
    // 设置defaultOption的值
    this.setOption(option)
    // 设置box元素
    this.setBox(selector)
    // 设置box的所有直接子元素
    this.setChildren()
    // 检测是否是标准的矩阵结构
    if (!this.checkWidthAndHeight()) {
      throw '不是标准的矩阵结构'
    }
    // 设置box的默认宽度和高度
    this.setBoxStyle()
    // 给children绑定鼠标移入事件
    this.bindEvtToChildren('mouseenter')
    // 默认激活第一张图片
    this.activePicture(this.activeIndex)
    // 设置children下标数组
    this.setList()
    // 启动循环播放图片
    this.loop()
    // 鼠标从box上离开时，启动轮播
    this.bindEvtToBox()
  }

  // 给box绑定鼠标移出事件
  bindEvtToBox() {
    this.box.onmouseleave = () => {
      this.loop()
    }
  }

  setChildren() {
    this.children = this.box.children
  }

  setBox(selector) {
    // selector = '.box'
    this.box = document.querySelector(selector)
  }

  setList() {
    for (let i = 0; i < this.children.length; i++) {
      this.list.push(i)
    }
  }

  getRandomIndex() {
    let index = parseInt(Math.random() * this.list.length)
    let activeIndex = this.list[index]
    this.list.splice(index, 1)
    if (this.list.length === 0) {
      this.setList()
    }
    return activeIndex
  }

  // 轮播激活图片
  loop() {
    if (this.id_1) {
      clearInterval(this.id_1)
    }
    this.id_1 = setInterval(() => {
      // 按顺序轮播
      // this.activeIndex++
      // if (this.activeIndex > 19) {
      //   this.activeIndex = 0
      // }
      // this.activePicture(this.activeIndex)
      // 随机轮播
      this.activePicture(this.getRandomIndex())
    }, 1000)
  }

  // 防抖函数
  debounce(index) {
    // 判断上次的动画操作是否存在
    if (this.id) {
      clearTimeout(this.id)
    }
    // 当前系统时间
    let now = new Date()
    // 两次动画之间的时间差<300ms,不直接执行动画操作
    if (now - this.lastRunTime < this.defaultOption.animateDuration) {
      this.id = setTimeout(() => {
        this.activePicture(index)
      }, this.defaultOption.animateDuration)
      return false
    }
    this.lastRunTime = now
    return true
  }

  // 激活图片
  activePicture(index) {
    console.log(index)
    if (!/^\d+$/.test(index)) {
      index = 0
    }
    // 判断index的范围
    if (index < 0) {
      index = 0
    }
    if (index > this.list.length - 1) {
      index = this.list.length - 1
    }
    let flag = this.debounce(index)
    console.log(flag)
    // 进行防抖拦截
    if (!flag) {
      return
    }
    // 重置激活下标
    this.activeIndex = index
    // 当前hover的元素对应的x,y坐标
    let current_x = index % this.defaultOption.width
    let current_y = parseInt(index / this.defaultOption.width)
    for (let x = 0; x < this.defaultOption.width; x++) {
      for (let y = 0; y < this.defaultOption.height; y++) {
        let i = y * this.defaultOption.width + x
        let item = this.children[i]
        let text = item.children[1]
        if (text) {
          text.style.transform = 'translateY(100%)'
        }
        // 正好是hover的元素，应该有激活的宽高
        if (current_x === x && current_y === y) {
          item.style.width = this.defaultOption.activeWidth + 'px'
          item.style.height = this.defaultOption.activeHeight + 'px'
          if (text) {
            text.style.transform = 'translateY(0%)'
          }
        } else if (current_x === x) {
          // 和激活的元素同x坐标的元素样式
          item.style.width = this.defaultOption.activeWidth + 'px'
          item.style.height = this.defaultOption.defaultHeight + 'px'
        } else if (current_y === y) {
          // 和激活的元素同y坐标的元素样式
          item.style.width = this.defaultOption.defaultWidth + 'px'
          item.style.height = this.defaultOption.activeHeight + 'px'
        } else {
          // x,y坐标都不和激活元素相同的元素样式
          item.style.width = this.defaultOption.defaultWidth + 'px'
          item.style.height = this.defaultOption.defaultHeight + 'px'
        }
      }
    }
  }

  // 给children绑定鼠标移入事件
  bindEvtToChildren(evt) {
    let _this = this
    for (let i = 0; i < this.children.length; i++) {
      this.children[i].addEventListener(
        evt,
        function () {
          // 停止轮播效果
          clearInterval(_this.id_1)
          // 激活图片
          _this.activePicture(i)
        },
        false
      )
    }
  }

  // 设置box的默认宽度和高度
  setBoxStyle() {
    this.box.style.width =
      (this.defaultOption.width - 1) * this.defaultOption.defaultWidth + this.defaultOption.activeWidth + 'px'
  }

  // width*height 是否是子元素的个数
  checkWidthAndHeight() {
    return this.defaultOption.width * this.defaultOption.height === this.children.length
  }

  // 对defaultOption进重新赋值的方法
  setOption(option) {
    // option = {width:5,height:4}
    Object.assign(this.defaultOption, option)
  }
}
